<template>
  <div>
    <swiper-page :items="items"></swiper-page>
    <Tutorial/>
    <div class="item" data-aos="fade-up" data-aos-offset="100"  data-aos-easing="ease-in-sine" data-aos-duration="750">
      <div class="bg-black h-full w-full"></div>
    </div>
    <div class="item float-right" data-aos="fade-up" data-aos-offset="100"  data-aos-easing="ease-in-sine" data-aos-duration="750">
      <div class="bg-black h-full w-full"></div>
    </div>
  </div>
</template>

<script>
import SwiperPage from '../components/swiper.vue'
export default {
  name: 'IndexPage',
  components:{SwiperPage},
  data(){
    return {
      items: [
        {
          src: 'https://placekitten.com/640/480?image=1',
        },
        {
          src: 'https://placekitten.com/640/480?image=2',
        },
        {
          src: 'https://placekitten.com/640/480?image=3',
        },
      ],
    }
  }
}
</script>
<style lang="scss" scoped>
.item{
  width: 40%;
    clear: both;
    height: 200px;
    background: #FFF;
    border-radius: 2px;
    margin: 12vh 0;
    padding: 10px;
    pre, code {
      height: 100%;
      margin: 0;
  }
}
</style>
